<template>
  <view class="time">
    <view class="timeItem" @click="show = !show">
      <view>{{ $t("newAdmin.order.more") }}</view>
      <i class="iconfont icon-filter"></i>
    </view>

    <view class="timePop" :class="[getPopClass]">
      <view class="menu" @click="show = false">
        <view>{{ $t("newAdmin.filter.time") }}</view>
        <i class="iconfont icon-arrow-up-filling"></i>
      </view>

      <view class="title">{{ $t("newAdmin.filter.orderTime") }}</view>
      <view class="list">
        <view
          class="item"
          :class="[getClass(item.id)]"
          v-for="item of list"
          :key="item.id"
          @click="handle('checked', item)"
        >
          <view class="box">
            {{ item.name }}
          </view>
        </view>

        <view class="item item2">
          <view class="box boxTime">
            <picker
              class="picker"
              @change="(e) => handle('change', e, 'begin_time')"
              mode="date"
              :value="date_range.begin_time"
            >
              {{ date_range.begin_time || $t("newAdmin.filter.startTime") }}
            </picker>

            <i class="iconfont icon-calculator"></i>
          </view>
        </view>
        <view class="item item2">
          <view class="box boxTime">
            <picker
              class="picker"
              @change="(e) => handle('change', e, 'end_time')"
              mode="date"
              :start="date_range.begin_time"
              :value="date_range.end_time"
              :disabled="!date_range.begin_time"
            >
              {{ date_range.end_time || $t("newAdmin.filter.endTime") }}
            </picker>

            <i class="iconfont icon-calculator"></i>
          </view>
        </view>

        <view class="item item2">
          <view class="box btn" @click="clear">
            {{ $t("newAdmin.filter.reset") }}
          </view>
        </view>
        <view class="item item2">
          <view class="box btn on" @click="submit">
            {{ $t("newAdmin.filter.submit") }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    getClass() {
      return (id) => {
        return id === this.index ? "on" : "";
      };
    },

    getPopClass() {
      return this.show ? "on" : "";
    },
  },

  data() {
    return {
      index: undefined,
      show: false,

      list: [
        { name: this.$t("newAdmin.filter.today"), id: 0 },
        { name: this.$t("newAdmin.filter.yesterday"), id: 1 },
        { name: this.$t("newAdmin.filter.Within7days"), id: 2 },
        { name: this.$t("newAdmin.filter.Within30days"), id: 3 },
      ],

      date_range: {
        begin_time: "",
        end_time: "",
      },
    };
  },

  methods: {
    clear() {
      this.date_range = {
        begin_time: "",
        end_time: "",
      };

      this.index = undefined;
    },

    handle(type, item, el) {
      let { date_range } = this;
      switch (type) {
        case "checked":
          if (item.id === this.index) return;
          this.index = item.id;
          this.date_range = {
            begin_time: "",
            end_time: "",
          };
          break;

        case "change":
          if (this.index !== undefined) {
            this.index = undefined;
          }

          if (el === "begin_time" && date_range.end_time) {
            date_range.end_time = "";
          }

          this.$set(date_range, el, item.detail.value);
          break;
      }
    },

    submit() {
      let { index, date_range: oldDateRange } = this,
        date_range = JSON.parse(JSON.stringify(oldDateRange));

      if (index !== undefined) {
        let timeReg = "yyyy-MM-dd",
          end_time = this.$utils.formatDate(new Date(), timeReg);

        switch (index) {
          case 0:
            date_range.begin_time = end_time;
            date_range.end_time = end_time;
            break;

          case 1:
            date_range.begin_time = this.$utils.formatDate(
              new Date(new Date().getTime() - 86400000),
              timeReg
            );
            date_range.end_time = this.$utils.formatDate(
              new Date(new Date().getTime() - 86400000),
              timeReg
            );
            break;

          case 2:
            date_range.begin_time = this.$utils.formatDate(
              new Date(new Date().getTime() - 86400000 * 6),
              timeReg
            );
            date_range.end_time = end_time;
            break;

          case 3:
            date_range.begin_time = this.$utils.formatDate(
              new Date(new Date().getTime() - 86400000 * 29),
              timeReg
            );
            date_range.end_time = end_time;
            break;
        }
      }

      this.Emit.$emit("handleTime", date_range);
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.timeItem {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;

  .iconfont {
    margin-left: 5rpx;
    font-size: 40rpx;
  }
}

.timePop {
  position: absolute;
  right: 0;
  top:100%;
  width: 100vw;
  background: #fff;
  line-height: 1.2;
  /* padding: 30rpx 22rpx; */
  padding: 0 22rpx;
  height: 0;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
  overflow: hidden;

  &.on {
    padding: 30rpx 22rpx;
    height: auto;
  }

  .menu {
    display: flex;
    justify-content: flex-end;
    color: #8c8c8c;

    .iconfont {
      margin-left: 8rpx;
      transition: 0.3s all;
    }
  }
}

.title {
  text-align: left;
}

.list {
  display: flex;
  margin-left: -18rpx;
  flex-wrap: wrap;

  .item {
    width: 25%;

    &.item2 {
      width: 50%;
    }

    &.on {
      .box {
        border-color: #f60413;
        background: #fcedeb;
        color: #f0250e;
      }
    }
  }

  .box {
    margin: 20rpx 0 0 18rpx;
    background: #f2f2f2;
    border: 2rpx solid #f2f2f2;
    line-height: 60rpx;
    height: 64rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 12rpx;
    text-align: center;
  }

  .btn {
    height: 80rpx;
    line-height: 74rpx;
    border-radius: 32px;

    &.on {
      background: #f0250e;
      color: #fff;
    }
  }

  .boxTime {
    display: flex;
    justify-content: space-between;
    padding: 0 14rpx 0 22rpx;
    line-height: 70rpx;
    height: 74rpx;
    text-align: left;

    .icon-calculator {
      font-size: 40rpx;
    }
  }
}

.picker {
  width: 100%;
  height: 100%;
  text-align: left;
}
</style>
